<template>
  <el-dialog
    :visible.sync="dialogFormVisible"
    :append-to-body="true"
    :before-close="handleClose"
    class="large-common-dialog-size"
  >
    <div>
      <Title title="成本信息" />
      <div class="table-content">
        <u-table
          :data="allCostList"
          :row-height="48"
          :height="allCostList.length > 5?maxHeight:''"
          class="fb-table"
          use-virtual
          beautify-table
          header-cell-class-name="order-data-header-cell">
          <u-table-column label="成本编号" align="left" min-width="180">
            <template slot-scope="scope">
              <ToolTip :content="scope.row.costNum" is-can-click @handelClick="toCostDetail(scope.row.orderCostItemId)" />
            </template>
          </u-table-column>
          <u-table-column label="成本项" align="left" min-width="130">
            <template slot-scope="scope">
              <ToolTip :content="scope.row.costName" />
            </template>
          </u-table-column>
          <u-table-column label="含税成本(元)" align="right" min-width="120">
            <template slot-scope="scope">
              <div v-if="scope.row.taxCost || scope.row.taxCost === 0">{{ scope.row.taxCost/100 | moneyFilter }}</div>
              <div v-else>--</div>
            </template>
          </u-table-column>
          <u-table-column label="供应商" align="left" min-width="120">
            <template slot-scope="scope">
              <ToolTip :content="scope.row.supplierName" />
            </template>
          </u-table-column>
          <u-table-column label="说明" align="left" min-width="190">
            <template slot-scope="scope">
              <ToolTip :content="scope.row.costDescription" />
            </template>
          </u-table-column>
          <u-table-column label="成本来源" align="left" min-width="120">
            <template slot-scope="scope">
              <div>{{ scope.row.costBelong | costBelongFilter }}</div>
            </template>
          </u-table-column>
          <u-table-column label="成本类型" align="left" min-width="90">
            <template slot-scope="scope">
              <div>{{ scope.row.costType | costTypeFilter }}</div>
            </template>
          </u-table-column>
          <u-table-column align="left" label="审批状态" width="80">
            <template slot-scope="scope">
              <StatusText :color="['#FD8546','#31CC9C', 'FF4E5F'][scope.row.costApprovalStatus]" :text="scope.row.costApprovalStatus | costApprovalStatus" />
            </template>
          </u-table-column>
          <u-table-column label="创建时间" align="left" min-width="150">
            <template slot-scope="scope">
              <div>{{ scope.row.createDate | format('YYYY/MM/DD HH:mm') }}</div>
            </template>
          </u-table-column>
          <u-table-column label="创建人" align="left" min-width="100">
            <template slot-scope="scope">
              {{ scope.row.creator || '--' }}
            </template>
          </u-table-column>
          <u-table-column label="成本添加时间" align="left" min-width="150">
            <template slot-scope="scope">
              <div v-if="scope.row.submitTime">{{ scope.row.submitTime | format('YYYY/MM/DD HH:mm') }}</div>
              <div v-else>--</div>
            </template>
          </u-table-column>
        </u-table>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import Title from '@/components/Title';
// filters
import { costBelongFilter, costTypeFilter, costApprovalStatus } from '@/filters/status';
import { format } from '@/filters/date';
import { moneyFilter } from '@/filters/number';

export default {
  components: { Title },
  filters: { moneyFilter, format, costBelongFilter, costTypeFilter, costApprovalStatus },
  data() {
    return {
      dialogFormVisible: false,
      allCostList: [],
      maxHeight: ''
    };
  },
  methods: {
    openDialog(row, detailData) {
      const clientHeight = window.innerHeight;
      this.maxHeight = ((clientHeight * 4) / 5) - 50;
      const orderId = row.id;
      const selectCost = detailData.selectCost;
      const allCostList = [];
      if (selectCost && selectCost.length) {
        selectCost.forEach(i => {
          if (i.costList) {
            i.costList.forEach(item => {
              if (item.id === orderId) {
                allCostList.push(item);
              }
            });
          }
        });
      }
      this.allCostList = allCostList;
      this.dialogFormVisible = true;
    },
    handleClose() {
      this.dialogFormVisible = false;
    },
    toCostDetail(id) {
      const routeUrl = this.$router.resolve({
        name: 'costDetail',
        params: { id }
      });
      window.open(routeUrl.href, '_blank');
    }
  }
};
</script>
<style lang="scss" scoped>
.table-content {
  margin-top: 24px;
}
</style>
